import 'babel-polyfill';

import React from 'react';
import { Link, NavLink } from 'react-router-dom'
import { Route, HashRouter } from 'react-router-dom';

import { Layout, Header, Sider, Content, Footer } from '../../components/layout/Layout.jsx'

import SiderMenu from '../../components/siderMenu/SiderMenu.jsx';
import AsyncComponent from './components/AsyncC.jsx';

const Test = AsyncComponent(() => import('./routers/Test.jsx'));

const LayoutPage = AsyncComponent(() => import('./routers/layout/Layout.jsx'));
const Grid = AsyncComponent(() => import('./routers/layout/Grid.jsx'));

const Date = AsyncComponent(() => import('./routers/components/Date.jsx'));
const Pagination = AsyncComponent(() => import('./routers/components/Pagination.jsx'))
const Table = AsyncComponent(() => import('./routers/components/Table.jsx'))
const Popup = AsyncComponent(() => import('./routers/components/Popup.jsx'))
const AudioAnalyser = AsyncComponent(() => import('./routers/components/AudioAnalyser.jsx'))

const Button = AsyncComponent(() => import('./routers/items/Button.jsx'))
const Icon = AsyncComponent(() => import('./routers/items/Icon.jsx'))

const Form = AsyncComponent(() => import('./routers/form/Form.jsx'))



const routes = [
  {
    exact: true,
    path: '/test',
    component: Test,
  }, {
    exact: true,
    path: '/',
    component: LayoutPage,
  }, {
    exact: true,
    path: '/layout/layout',
    component: LayoutPage,
  }, {
    exact: true,
    path: '/layout/grid',
    component: Grid,
  }, {
    exact: true,
    path: '/components/date',
    component: Date,
  }, {
    exact: true,
    path: '/components/pagination',
    component: Pagination,
  }, {
    exact: true,
    path: '/components/table',
    component: Table,
  }, {
    exact: true,
    path: '/components/popup',
    component: Popup,
  }, {
    exact: true,
    path: '/components/audioAnalyser',
    component: AudioAnalyser,
  }, {
    exact: true,
    path: '/items/button',
    component: Button,
  }, {
    exact: true,
    path: '/items/icon',
    component: Icon,
  },, {
    exact: true,
    path: '/form/form',
    component: Form,
  },
]

export default class Routers extends React.Component {
  render() {
    return (
      <HashRouter basename="/">
        <Layout>
          <Sider>
            <h1 className="logo"><Link to={'/'} style={{fontFamily:'Lobster Two'}}>REACT UI</Link></h1>
            <SiderMenu/>
          </Sider>
          <Layout>
            {/*<Header>header</Header>*/}
            <Content>
              {routes.map((route, index) => (
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  component={route.component}
                />
              ))}
            </Content>
            {/*<Footer>footer</Footer>*/}
          </Layout>
        </Layout>
      </HashRouter>
    );
  }
}
